import { Droppable, Draggable } from 'react-beautiful-dnd';
import deleteBtn from '../../../../../public/assets/imgs/delete.png';
import deleteBtn2x from '../../../../../public/assets/imgs/delete@2x.png';
import type { draggableAPI } from '@/models/models';
import styles from './index.less';

interface moduleItem1 {
  id: string;
  moduleList?: draggableAPI.moduleItem[];
  content?: string;
  onDelete?: (deleteIndex: number, id: { id: string }) => void;
}

interface IProps {
  droppableId: string;
  draggableAreaStyle: any;
  draggableAreaItemStyle: any;
  draggableAreaDataList: moduleItem1[];
}

const grid = 8;

const getListStyle = (isDraggingOver: boolean) => ({
  background: isDraggingOver ? 'lightblue' : '#eee',
  padding: grid,
  width: 250,
  margin: 0,
});

const getItemStyle = (isDragging: boolean, draggableStyle: any) => ({
  // some basic styles to make the items look a bit nicer
  userSelect: 'none',
  padding: grid,
  margin: `0 0 ${grid}px 0`,

  // change background colour if dragging
  background: isDragging ? 'lightgreen' : '#fff',

  // styles we need to apply on draggables
  ...draggableStyle,
});

function DraggableTpl(props: IProps) {
  const {
    droppableId,
    draggableAreaStyle = {},
    draggableAreaItemStyle = {},
    draggableAreaDataList = [],
  } = props;
  console.log('draggableAreaDataList', draggableAreaDataList);

  const itemAndDeleteEle = (
    ishShowDelete: boolean,
    item: moduleItem1,
    deleteIndex: number,
    deleteDroppableId: string,
  ) => {
    return (
      <>
        {item.content}
        {ishShowDelete && (
          <img
            alt=""
            className={styles.delete}
            src={deleteBtn}
            srcSet={`${deleteBtn2x} 2x`}
            onClick={() => item.onDelete && item?.onDelete(deleteIndex, { id: deleteDroppableId })}
          />
        )}
      </>
    );
  };

  return (
    <>
      <Droppable droppableId={droppableId}>
        {(provided, snapshot) => {
          console.log(`${droppableId}`, provided, snapshot, draggableAreaStyle);
          return (
            <div
              ref={provided.innerRef}
              style={{
                ...getListStyle(snapshot.isDraggingOver),
                ...draggableAreaStyle,
              }}
              {...provided.droppableProps}
            >
              {draggableAreaDataList.map((item: any, index: number) => {
                console.log('*******', item);
                // $ 拖拽区域中的每个拖拽项
                return (
                  <Draggable key={item.id} draggableId={item.id} index={index}>
                    {(provided1, snapshot1) => (
                      <div
                        ref={provided1.innerRef}
                        {...provided1.draggableProps}
                        {...provided1.dragHandleProps}
                        className={styles.floorDraggableItem}
                        style={{
                          ...getItemStyle(snapshot1.isDragging, provided1.draggableProps.style),
                          ...draggableAreaItemStyle,
                        }}
                      >
                        {droppableId === 'rightArea' && (
                          <div className={styles.floorInfo}>{`楼层${index} `}</div>
                        )}
                        {/* 定义 拖拽区域中每一项的 展示及样式 */}
                        {item.moduleList && (
                          <DraggableTpl
                            key={item.id}
                            droppableId={item.id}
                            draggableAreaStyle={item.draggableAreaStyle}
                            draggableAreaItemStyle={item.draggableAreaItemStyle}
                            draggableAreaDataList={item.moduleList}
                          />
                        )}
                        {itemAndDeleteEle(droppableId !== 'leftArea', item, index, droppableId)}
                      </div>
                    )}
                  </Draggable>
                );
              })}
              {provided.placeholder}
            </div>
          );
        }}
      </Droppable>
    </>
  );
}

export default DraggableTpl;
